<!--
 * @Author: 冯尚新 fengshangxin@yunjinhz.com
 * @Date: 2023-05-23 10:51:58
 * @LastEditors: 冯尚新 fengshangxin@yunjinhz.com
 * @LastEditTime: 2023-05-30 20:48:46
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\store\billManage\selectWarehouseLocation.vue
 * @Description: 选择库位列表
-->

<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <view>
      <u-search
        class="search-space"
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="库位编码"
        v-model="searchData.keyWord"
        @custom="handlerSearch"
      ></u-search>
      <u-dropdown class="" ref="searchDropDown" @open="handlerOpen" @close="handlerClose">
        <u-dropdown-item :title="warehouse" :options="[]" :disabled="true"></u-dropdown-item>
        <u-dropdown-item title="库位类型" :options="licOptions" v-model="searchData.psType" @change="handlerChangeItem"></u-dropdown-item>
      </u-dropdown>
      <u-gap class="u-gap-sty" :height="$theme.cm_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
    </view>
    <view class="content u-page u-p-t-30 u-p-b-30">
      <mescroll-list
        :i="0"
        :index="0"
        :height="getListViewHeight()"
        :load-data="loadData"
        :initLoad="false"
        ref="mescrollItem0"
      >
        <view slot-scope="d">
          <u-row style="border-bottom: 1px solid #e5e5e5;" @tap="handlerSelectItem(d.data)">
            <u-col span="10" :class="[d.data.goodsCount == 0 ? '' : 'bgc-sty']">
              <selectWarehouseItem :itemInfo="d.data"></selectWarehouseItem>
            </u-col>
            <u-col span="2" style="text-align:right;">
              <u-icon
                name="checkbox-mark"
                :color="$theme.u_type_primary"
                size="38"
                style="margin-right: 10px;"
                v-if="selectedUids.includes(d.data.psId)"
              ></u-icon>
            </u-col>
          </u-row>
        </view>
      </mescroll-list>
    </view>
    <view class="submit-btns btn-other-cls">
      <u-button plain class="u-btn" type="primary" @click="handlerSure(0)">
        确认
      </u-button>
      <u-button class="u-btn" type="primary" @click="handlerSure(1)">
        批量确认
      </u-button>
    </view>
  </view>
</template>

<script>
import MescrollList from "@/components/mescroll_list.vue";
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import storeService from '@/service/store/store.service.js';
import selectWarehouseItem from './selectWarehouseItem.vue'
export default {
  components: {
    MescrollList,
    selectWarehouseItem,
  },
  mixins: [MescrollMoreMixin,],
  data() {
    return {
      selectedUids: [],     // 选中项的ids
      selectedItems: [],     // 选中项
      searchData: {   // 查询参数
        keyWord: "",  // 模糊搜索关键字
        storeId: "",
        psType: "",
      },
      warehouse: '所属仓库',
      licOptions: [
        {
          label: '格',
          value: 1,
        },
        {
          label: '垛',
          value: 2,
        },
      ],
      goodsItem:{},
    };
  },
  onLoad(opt) {
    this.goodsItem = this.getRouteParam()
    this.warehouse = this.goodsItem.storeName;
    this.selectedUids.push(this.goodsItem.psId);
    this.selectedItems.push(this.goodsItem);
  },
  methods: {
    handlerSearch() {
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    },
    getListViewHeight() {
      let p = (this.$u.sys().windowHeight - 44 - uni.upx2px(90)  - this.$u.sys().statusBarHeight) + "px";
      // #ifdef H5-DINGDING || H5-WECHAT
      p = (this.$u.sys().windowHeight - uni.upx2px(90)  - this.$u.sys().statusBarHeight) + "px";
      // #endif
      return p;
    },
    // 在线案件查询数据
    loadData (page) {
      return new Promise((resolve, reject) => {
        let params = {
          page: page.num,
          limit: page.size,
          paras: {
            caseUuid: this.goodsItem.caseUuid,
            dimension: '1',
            goodsUuid: this.goodsItem.goodsUuid,
            income: '02',
            propSubType: this.goodsItem.propSubType,
            propType: this.goodsItem.propType,
            psCodeLike: this.searchData.keyWord,
            psId: '',
            psType: this.searchData.psType,
            storeId: this.goodsItem.storeId,
            view: 'chose',
          },
        }
        storeService.positionDraggableList(params).then(res => {
          if (res.success) {
            resolve({
              count: res.count,
              data: res.data,
            });
          } else {
            resolve({
              count: 0,
              data: [],
            });
          }
        }).catch(e => {
          this.$u.toast('请求失败:' + e);
          resolve({
            count: 0,
            data: [],
          });
        });
      })
    },
    handlerOpen(idx) {
      this.$refs.searchDropDown.highlight();
    },
    handlerClose(idx) {
      this.$refs.searchDropDown.highlight(idx);
    },
    // 选中
    handlerSelectItem(item) {
      this.selectedUids = [item.psId,];
      this.selectedItems = [item,];
    },
    handlerChangeItem(e) {
      console.log(this.searchData);
      this.handlerSearch();
    },
    // 确定
    handlerSure (type) {
      this.selectedItems.forEach(item => {
        this.$set(item, 'goodsIndex', this.goodsItem.goodsIndex);
      });
      if (type == 0) {
        this.backPrev({
          paramKey:'refresh' ,
          param:this.selectedItems,
        })
      } else {
        this.backPrev({
          paramKey:'allRefresh' ,
          param:this.selectedItems,
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page{
	padding:0;
}
.slot-content {
  background-color: #FFFFFF;
  padding:32rpx 32rpx;
  .item-box {
    margin-bottom: 32rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   }
}
.txt-sty{
  line-height: 60rpx;
  padding: 0 10px;
}
.search-space{
	padding: $cm-search-padding-row $cm-search-padding-column;
	padding-bottom: 6px;
}
.u-gap-sty{
	position: relative;
}
.bgc-sty{
  background-color: #a0cfff;
}
.good-popup-lay {
		padding: $cm-content-paddng-row;
		width: 100%;
		height: 100%;

		&__title {
			font-size: 36rpx;
			font-weight: 600;
			color: $u-main-color;
			margin: 10rpx 0;
			text-align: center;
			width: 100%;
		}

		&__btns {
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			uni-button {
				flex: 0.28;
			}
		}
	}
  .u-p-b-30 {
		margin-bottom: 30px;
  }
</style>
